<template>
    <div class='page-content'>
        <table-bar :showTop="true" :columns="columns" @changeColumn="changeColumn">
            <div slot="top" v-if="isShowSearch">
                <el-form label-width="90px">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="状态：">
                                <el-select v-model="status" style="width:100%" placeholder="请选择状态">
                                    <el-option label="退款待审核" value="-4"></el-option>
                                    <el-option label="退款中" value="-3"></el-option>
                                    <el-option label="已退款" value="-2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="开始时间：">
                                <el-date-picker v-model="start_time" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择开始时间"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="结束时间：">
                                <el-date-picker v-model="end_time" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择结束时间"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="预定日期：">
                                <el-date-picker v-model="day" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="datetime" placeholder="选择预定日期"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="关键词：">
                                <el-input v-model="word" type="text" placeholder="请输入昵称或手机号" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="名称：">
                                <el-input v-model="source_name" type="text" placeholder="请输入服务或套餐名称" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="订单编号：">
                                <el-input v-model="order_number" type="text" placeholder="请输入订单编号" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="预定类型：">
                                <el-select v-model="contain_type" style="width:100%" placeholder="请选择预定类型">
                                    <el-option label="住宿" value="1"></el-option>
                                    <el-option label="订餐" value="2"></el-option>
                                    <el-option label="玩乐" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="营地：">
                                <el-select v-model="camp_id" style="width:100%" placeholder="请选择营地">
                                    <el-option v-for="(item,index) in campList" :label="item.name" :value="item.id" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="success" @click="exportExcel">导出</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-row>
                    </el-row>
                </el-form>
            </div>
        </table-bar>
        <el-table :data="lists" :showPage="false" border ref="table">
            <el-table-column label="ID" width="70" prop="id" v-if="columns[0].show"/>
            <el-table-column label="订单编号" width="160" prop="order_number" v-if="columns[1].show"/>
            <el-table-column label="姓名" width="80" prop="name" v-if="columns[2].show"/>
            <el-table-column label="手机号" width="120" prop="mobile" v-if="columns[3].show"/>
            <el-table-column label="订单金额" width="90" prop="price" v-if="columns[4].show"/>
            <el-table-column label="支付金额" width="90" prop="money_payed" v-if="columns[5].show"/>
            <el-table-column label="支付时间" width="150" prop="pay_time" v-if="columns[6].show"/>
            <el-table-column label="日期" width="90" prop="day" v-if="columns[7].show"/>
            <el-table-column label="相关服务" width="180" prop="service_names" v-if="columns[20].show"/>
            <el-table-column label="名称" width="190" prop="source_name" v-if="columns[8].show"/>
            <el-table-column label="规格名称" width="120" prop="sku_name" v-if="columns[9].show"/>
            <el-table-column label="数量" width="60" prop="number" v-if="columns[10].show"/>
            <el-table-column label="支付方式" width="80" prop="pay_type" v-if="columns[11].show">
                <template slot-scope="scope">
                    <template v-if="scope.row.pay_type == 1">
                        <el-tag size="mini" type="success">微信</el-tag>
                    </template>
                    <template v-else>
                        <el-tag size="mini" type="danger">余额</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="用户昵称" width="120" prop="user_nickname" v-if="columns[12].show"/>
            <el-table-column label="用户手机" width="120" prop="user_mobile" v-if="columns[13].show"/>
            <el-table-column label="卡券金额" width="80" prop="coupon_price" v-if="columns[14].show"/>
            <el-table-column label="折扣金额" width="80" prop="discount_price" v-if="columns[15].show"/>
            <el-table-column label="包含住宿?" width="80" prop="is_contain_room_name" v-if="columns[16].show"/>
            <el-table-column label="包含订餐?" width="80" prop="is_contain_food_name" v-if="columns[17].show"/>
            <el-table-column label="状态" width="80" prop="status_name" v-if="columns[18].show"/>
            <el-table-column label="创建时间" width="140" prop="create_time" v-if="columns[19].show"/>
            <el-table-column fixed="right" label="操作" width="220" v-if="isShowEdit">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == -4">
                        <el-button type="primary" @click="showCancelModel(scope.row)" v-if="isShowEdit">确认取消</el-button>
                    </template>
                    <el-button type="info" @click="detailModel(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template v-if="allpage>10">
            <el-pagination @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-size="10"
                            layout="total, prev, pager, next, jumper"
                            :total="allpage">
            </el-pagination>
        </template>
        <el-dialog title="订单详细信息" width="40%" :visible.sync="dvDetailEdit">
            <el-descriptions title="下单信息" class="margin-top" :column="2" size="medium" :border="true">
                <el-descriptions-item label="订单编号">{{model.order_number}}</el-descriptions-item>
                <el-descriptions-item label="所属营地">{{model.camp_name}}</el-descriptions-item>
                <el-descriptions-item label="联系人姓名">{{model.name}}</el-descriptions-item>
                <el-descriptions-item label="联系人电话">{{model.mobile}}</el-descriptions-item>
                <el-descriptions-item label="产品">{{model.source_name}}</el-descriptions-item>
                <el-descriptions-item label="规格名称">{{model.sku_name}}</el-descriptions-item>
                <el-descriptions-item label="日期">{{model.day}}</el-descriptions-item>
                <el-descriptions-item label="相关服务">{{model.service_names}}</el-descriptions-item>
                <el-descriptions-item label="数量">{{model.number}}</el-descriptions-item>
                <el-descriptions-item label="总金额">{{model.total_price}}</el-descriptions-item>
                <el-descriptions-item label="订单金额">{{model.price}}</el-descriptions-item>
                <el-descriptions-item label="折扣比例(%)">{{model.coupon_price}}</el-descriptions-item>
                <el-descriptions-item label="折扣金额">{{model.discount_percent}}</el-descriptions-item>
                <el-descriptions-item label="卡券金额">{{model.discount_price}}</el-descriptions-item>
                <el-descriptions-item label="下单时间">{{model.create_time}}</el-descriptions-item>
                <el-descriptions-item label="下单备注">{{model.remark}}</el-descriptions-item>
                <el-descriptions-item label="用户昵称">{{model.user_nickname}}</el-descriptions-item>
                <el-descriptions-item label="用户手机">{{model.user_mobile}}</el-descriptions-item>
                <el-descriptions-item label="订单类型">{{model.type_name}}</el-descriptions-item>
                <el-descriptions-item label="订单状态">{{model.status_name}}</el-descriptions-item>
                <el-descriptions-item label="取消申请时间">{{model.apply_cancel_time}}</el-descriptions-item>
                <el-descriptions-item label="取消理由">{{model.cancel_reason}}</el-descriptions-item>
                <el-descriptions-item label="取消通过时间">{{model.sure_cancel_time}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="支付信息" class="margin-top" :column="2" size="medium" :border="true">
                <el-descriptions-item label="支付方式">{{model.pay_type_name}}</el-descriptions-item>
                <el-descriptions-item label="支付时间">{{model.pay_time}}</el-descriptions-item>
                <el-descriptions-item label="支付金额">{{model.money_payed}}</el-descriptions-item>
                <el-descriptions-item label="支付编号">{{model.prepay_id}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="其他信息" class="margin-top" :column="2" size="medium" :border="true" v-if="model.is_year_card != 1">
                <el-descriptions-item label="是否包含住宿">{{model.is_contain_room_name}}</el-descriptions-item>
                <el-descriptions-item label="住宿备注">{{model.room_intro}}</el-descriptions-item>
                <el-descriptions-item label="是否包含订餐">{{model.is_contain_food_name}}</el-descriptions-item>
                <el-descriptions-item label="订餐备注">{{model.food_intro}}</el-descriptions-item>
                <el-descriptions-item label="是否包含玩乐">{{model.is_contain_play_name}}</el-descriptions-item>
                <el-descriptions-item label="玩乐备注">{{model.play_intro}}</el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dvDetailEdit = false">取 消</el-button>
                <el-button type="primary" @click="dvDetailEdit = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="dialogBigVisible" width="60%">
            <img :src="bigSrc" style="width:100%;display: block">
        </el-dialog>
        <el-dialog title="取消订单详情" width="40%" :visible.sync="dvCancelEdit">
            <el-descriptions title="下单信息" class="margin-top" :column="2" size="medium" :border="true">
                <el-descriptions-item label="订单编号">{{model.order_number}}</el-descriptions-item>
                <el-descriptions-item label="所属营地">{{model.camp_name}}</el-descriptions-item>
                <el-descriptions-item label="联系人姓名">{{model.name}}</el-descriptions-item>
                <el-descriptions-item label="联系人电话">{{model.mobile}}</el-descriptions-item>
                <el-descriptions-item label="产品">{{model.source_name}}</el-descriptions-item>
                <el-descriptions-item label="规格名称">{{model.sku_name}}</el-descriptions-item>
                <el-descriptions-item label="日期">{{model.day}}</el-descriptions-item>
                <el-descriptions-item label="相关服务">{{model.service_names}}</el-descriptions-item>
                <el-descriptions-item label="数量">{{model.number}}</el-descriptions-item>
                <el-descriptions-item label="总金额">{{model.total_price}}</el-descriptions-item>
                <el-descriptions-item label="订单金额">{{model.price}}</el-descriptions-item>
                <el-descriptions-item label="折扣比例(%)">{{model.coupon_price}}</el-descriptions-item>
                <el-descriptions-item label="折扣金额">{{model.discount_percent}}</el-descriptions-item>
                <el-descriptions-item label="卡券金额">{{model.discount_price}}</el-descriptions-item>
                <el-descriptions-item label="下单时间">{{model.create_time}}</el-descriptions-item>
                <el-descriptions-item label="下单备注">{{model.remark}}</el-descriptions-item>
                <el-descriptions-item label="用户昵称">{{model.user_nickname}}</el-descriptions-item>
                <el-descriptions-item label="用户手机">{{model.user_mobile}}</el-descriptions-item>
                <el-descriptions-item label="订单类型">{{model.type_name}}</el-descriptions-item>
                <el-descriptions-item label="订单状态">{{model.status_name}}</el-descriptions-item>
                <el-descriptions-item label="取消申请时间">{{model.apply_cancel_time}}</el-descriptions-item>
                <el-descriptions-item label="取消理由">{{model.cancel_reason}}</el-descriptions-item>
                <el-descriptions-item label="取消通过时间">{{model.sure_cancel_time}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="其他信息" class="margin-top" :column="2" size="medium" :border="true">
                <template v-if="model.is_contain_room == 1">
                    <el-descriptions-item label="是否包含住宿">{{model.is_contain_room_name}}</el-descriptions-item>
                    <el-descriptions-item label="住宿备注">{{model.room_intro}}</el-descriptions-item>
                </template>
                <template v-if="model.is_contain_food == 1">
                    <el-descriptions-item label="是否包含订餐">{{model.is_contain_food_name}}</el-descriptions-item>
                    <el-descriptions-item label="订餐备注">{{model.food_intro}}</el-descriptions-item>
                </template>
                <template v-if="model.is_contain_play == 1">
                    <el-descriptions-item label="是否包含玩乐">{{model.is_contain_play_name}}</el-descriptions-item>
                    <el-descriptions-item label="玩乐备注">{{model.play_intro}}</el-descriptions-item>
                </template>
            </el-descriptions>
            <el-descriptions title="支付信息" class="margin-top" :column="2" size="medium" :border="true">
                <el-descriptions-item label="支付方式">{{model.pay_type_name}}</el-descriptions-item>
                <el-descriptions-item label="支付时间">{{model.pay_time}}</el-descriptions-item>
                <el-descriptions-item label="支付金额">{{model.money_payed}}</el-descriptions-item>
                <el-descriptions-item label="支付编号">{{model.prepay_id}}</el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="onSureCancelModel">驳回取消申请</el-button>
                <el-button type="primary" @click="sureCancelModel">通过取消申请</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {getcancelOrderList,sureCancelOrder,onSureCancelOrder,getLoadButtonIsShow} from '@/api/order/orderApi';
    import {getCampListAll} from '@/api/camp/campApi';
    import {baseUrl} from '@/utils/config.js';

export default {
    data() {
        return {
            lists: [],
            allpage: 1,//总页数
            showItem: 5,//分页显示得中间按钮个数
            current: 1,//当前页
            status: '',
            word:'',
            start_time:'',
            end_time:'',
            order_number:'',
            contain_type:'',
            day:'',
            source_name:'',
            camp_id:'',
            campList:[],
            isShowAdd:false,
            isShowEdit:false,
            isShowDelete:false,
            isShowSearch:false,
            setWidth:0,
            model: {},
            columns: [
                {name: "ID", show: true},
                {name: "订单编号", show: true},
                {name: "姓名", show: true},
                {name: "手机号", show: true},
                {name: "订单金额", show: true},
                {name: "支付金额", show: true},
                {name: "支付时间", show: true},
                {name: "日期", show: true},
                {name: "名称", show: true},
                {name: "规格名称", show: true},
                {name: "数量", show: true},
                {name: "支付方式", show: true},
                {name: "用户昵称", show: true},
                {name: "用户手机", show: true},
                {name: "卡券金额", show: true},
                {name: "折扣金额", show: true},
                {name: "包含住宿?", show: true},
                {name: "包含订餐?", show: true},
                {name: "状态", show: true},
                {name: "创建时间", show: true},
                {name: "相关服务", show: true},
            ],
            dvDetailEdit:false,
            dialogBigVisible: false,
            bigSrc: '',
            exportExcelUrl:baseUrl + '/order/exportCancelExcel',
            dvCancelEdit:false
        };
    },
    created: function () {
        this.loadButtonAuth();
        this.handleCurrentChange(1);
        this.getCampList();
    },
    methods: {
        showCancelModel:function(row){
            this.model = row;
            this.dvCancelEdit = true;
        },
        sureCancelModel:function(){
            this.$confirm("您确认要通过该用户发起的取消订单操作?该操作不可逆,请谨慎操作", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                sureCancelOrder({
                    id: this.model.id,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                        this.dvCancelEdit = false;
                    }
                })
            }).catch(() => {
            })
        },
        onSureCancelModel:function(){
            this.$confirm("您确认要驳回该用户发起的取消订单操作?该操作不可逆,请谨慎操作", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                onSureCancelOrder({
                    id: row.id,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                        this.dvCancelEdit = false;
                    }
                })
            }).catch(() => {
            })
        },
        getCampList:function(){
            getCampListAll().then(res => {
                this.campList = res.data.lists;
            })
        },
        clickBig: function (img) {
            this.bigSrc = img;
            this.dialogBigVisible = true;
        },
        detailModel:function(row){
            this.model = row;
            this.dvDetailEdit = true;
        },
        loadButtonAuth: function () {
            getLoadButtonIsShow({
                path: this.$route.path,
            }).then(res => {
                this.isShowAdd = res.data.isShowAdd;
                this.isShowEdit = res.data.isShowEdit;
                this.isShowDelete = res.data.isShowDelete;
                this.isShowSearch = res.data.isShowSearch;
                this.isShowExport = res.data.isShowExport;
                this.setWidth = res.data.setWidth;
            })
        },
        handleCurrentChange: function (index) {
            this.current = index;
            getcancelOrderList({
                page: index,
                status: this.status,
                word:this.word,
                start_time:this.start_time,
                end_time:this.end_time,
                order_number:this.order_number,
                day:this.day,
                contain_type:this.contain_type,
                source_name:this.source_name,
                camp_id:this.camp_id
            }).then(res => {
                this.lists = res.data.lists;
                this.allpage = res.data.allpage;
            })
        },
        exportExcel:function(){
            window.location.href = this.exportExcelUrl + '?word=' + this.word + '&status=' + this.status + '&start_time=' + this.start_time
             + '&end_time=' + this.end_time + '&type=' + this.type + '&order_number=' + this.order_number + '&day=' + this.day + 
             '&source_name=' + this.source_name + '&contain_type=' + this.contain_type + '&camp_id=' + this.camp_id;
        },
        showDialog: function () {
            this.model = {};
            this.dvEdit = true;
        },
        reset: function () {
            this.status = '';
            this.word = '';
            this.start_time = '';
            this.end_time = '';
            this.order_number = '';
            this.contain_type = '';
            this.day = '';
            this.source_name = '';
            this.camp_id = '';
        },
        search: function () {
            this.handleCurrentChange(1);
        },
        handleClose: function (done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                })
                    .catch(_ => {
                });
        },
        changeColumn(columns) {
            this.columns = columns;
            this.$refs.table.doLayout()
        },
       deleteModel: function (row) {
            this.$confirm("您确认要删除该条数据?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                deleteOrder({
                    id: row.id,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                    }
                })
            }).catch(() => {
            })
        },
    },
}
</script>

<style lang='scss' scoped>
.page-content {
    width: 100%;
    height: 100%;
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
}

</style>

